import React, { useEffect } from "react";
import AMapLoader from "@amap/amap-jsapi-loader";
import "./index.css";
const AMapExample = () => {
  useEffect(() => {
    AMapLoader.load({
      key: "f526b8358c9ee834a44b815cab831497", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], //插件列表
    })
      .then((AMap) => {
        let amap = new AMap.Map("mapContainer", {
          // mapcontainer为容器的id
          zoom: 10, //初始化地图层级
          center: [121.492156, 31.233462], //初始化地图中心点
        });
        // 标记
        let marker = new AMap.Marker({
          position: [121.492156, 31.233462], // 基点位置
        });
        // 地图添加标记
        amap.add(marker);
      })
      .catch((e) => {
        console.log(e);
      });
  }, []);

  return (
    <div className="gd">
      <div id="mapContainer" style={{ width: "1400px", height: "800px" }}></div>
    </div>
  );
};

export default AMapExample;
